<template>
  <div class="annual-project-plan">
    <!-- 页面标题 -->
    <div class="container-box">
       <div class="title main-title">
        <span>年度计划/年度项目计划</span>
        <span class="back-btn" @click="() => this.$router.back()"
          ><img src="../../assets/images/icon_comm_back.png" alt="" />返回</span
        >
      </div>
      <!-- <div class="main-title">年度计划/年度项目计划</div> -->
      <!-- 页面主体 -->
      <div class="main-content">
        <div class="right-title">
          <img src="../../assets/images/icon_16_title.png" alt="" /> 基本信息
        </div>
        <div class="annual-form-box">
          <el-descriptions border :column="1">
                <el-descriptions-item
                  label="计划名称"
                  label-class-name="descriptions-item-label-annual item-label-one"
                  content-class-name="descriptions-item-content "
                  >
                  {{formData.name}}
                  </el-descriptions-item
                >
              </el-descriptions>
              <el-descriptions border :column="3" >
                <el-descriptions-item
                  v-for="(n,i) in infoData"
                  :label="n.label"
                  label-class-name="descriptions-item-label-annual cancel-border-top"
                  content-class-name="descriptions-item-content item-content-one cancel-border-top"
                  :key="i"
                  >{{
                    formData[n.value]==null|| formData[n.value]==undefined?0 : formData[n.value]
              }}</el-descriptions-item
                >
              </el-descriptions>
          <!-- <div>
            <span class="table-header">计划名称</span>
            <span class="table-body">{{ formData.name }}</span>
          </div> -->
          <!-- <div class="tab-box">
            <div v-for="n in infoData" class="tips1">
              <span class="table-header">{{ n.label }}</span>
              <span class="table-body table-body1">{{
                formData[n.value]
              }}</span>
            </div>
          </div> -->
        </div>
        <div class="right-title">
          <img src="../../assets/images/icon_16_title.png" alt="" />
          年度项目列表
        </div>
        <div class="btn-box">
          <div style="display: flex;">
            <div class="extract-btn">
              <el-button
                :disabled="state == 44"
                @click="clickTo"
                v-if="ifExtract == 0"
                v-hasPermi="['annualProjectPlan:list:extract']"
                >专家抽取</el-button
              >
              <el-button
                @click="goToExpert"
                v-else
                >专家管理</el-button
              >
              <!-- 专家抽取 -->
            </div>
            <div class="upload-btn">
              <el-button :disabled="state == 44||fileForm.fileName!=undefined" @click="uploadConclusion" v-hasPermi="['annualProjectPlan:list:uploadFile']"
                >上传专家审核结论</el-button
              >
            </div>
            <div class="file_box" v-show="fileForm.fileName">
              <img src="../../assets/images/icon_form_file.png" alt="" >
              <span class="file_name" @click="$download(fileForm.fileUrl)">{{fileForm.fileName!=undefined ?fileForm.fileName:''}}</span>
              <img  @click="delFile" src="../../assets/images/icon_form_del.png" alt="" v-hasPermi="['annualProjectPlan:list:delFile']">
            </div>
          </div>
          <div class="export-btn">
            <el-button @click="handleExportFile" v-hasPermi="['annualProjectPlan:list:exportFile']">导出</el-button>
          </div>
        </div>
        <div class="table-box">
          <el-table
            :data="tableData"
            border
            v-loading="loading"
            empty-text="暂无数据"
            :max-height="450"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column
              v-for="(item, index) in tableColumn"
              :key="index"
              :label="item.label"
              :prop="item.prop"
            >
              <template slot-scope="scope">
                <div v-if="item.prop == 'type'">
                  {{ scope.row[item.prop] === '0' 
                  ? "建设类（新开工）" 
                  :scope.row[item.prop] === '1' 
                  ? "建设类（续建）" 
                  : scope.row[item.prop] === '2' 
                  ? "购买服务类" 
                  : scope.row[item.prop] === '3' 
                  ? "运维类" : "其他" }}
                </div>
                <div v-else>
                  {{ scope.row[item.prop] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="approvalStatusName" label="审核结果">
              <template slot-scope="scope">
                <div class="state-span">
                  <!-- <span :class="['out-line ' +'out-line' +scope.row.isState]"><span></span></span>{{ -->
                  <span
                    :class="[
                      'out-line ',
                      { 'out-line1': scope.row.approvalStatus == '4' },
                      { 'out-line2': scope.row.approvalStatus == '2' },
                    ]"
                    ><span></span></span
                  >
                  {{scope.row.approvalStatusName}}
                  <!-- {{
                    scope.row.approvalStatus == 0
                      ? "已提交"
                      : scope.row.approvalStatus == 1
                      ? "待审核"
                      : scope.row.approvalStatus == 2
                      ? "已通过"
                      : scope.row.approvalStatus == 3
                      ? "退回修改"
                      : scope.row.approvalStatus == 4
                      ? "驳回"
                      : scope.row.approvalStatus == 28
                      ? "待提交"
                      : ""
                  }} -->
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row, 'look')"
                  type="text"
                  size="small"
                  >查看</el-button
                >
                <el-button
                  :disabled="state == 44 || ifExtract == 0"
                  v-if="scope.row.approvalStatus == 1||scope.row.approvalStatus == 53"
                  @click="handleClick(scope.row, 'audit')"
                  type="text"
                  size="small"
                  v-hasPermi="['annualProjectPlan:list:audit']"
                  >审核</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryForm.pageNum"
          :limit.sync="queryForm.pageSize"
          @pagination="getTable()"
        />
      </div>
    </div>
    <!-- <EditDialog ref="ruleFormRf" :proid="proid" :showDialog="showDialog" @changeShowDialog="changeShowDialog" :type="type"  ></EditDialog> -->
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      width="628px"
      :before-close="handleClose"
      custom-class="dialog-box"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRf"
        :validate-on-rule-change="false"
        label-width="118px"
        width="100%"
        >
        <el-form-item
          label="审核结果"
          prop="approvalStatus"
          v-if="type == 'audit'"
        >
          <el-select v-model="ruleForm.approvalStatus" placeholder="请选择" style="width:100%">
            <el-option label="通过" :value="2"></el-option>
            <el-option label="退回修改" :value="3"></el-option>
            <el-option label="驳回" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="审核意见"
          prop="approvalOpinion"
          v-if="type == 'audit'"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.approvalOpinion"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <div class="select-template" v-if="type == 'audit'">
          <el-dropdown trigger="click" @command="handleCommand" placement="top">
            <span class="el-dropdown-link">
              选择模版<i class="icon-arrow-down el-icon-folder-remove"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                icon="el-icon-circle-check"
                v-for="dict in selectDemoList"
                :key="dict.dictValue"
                :command="dict.dictValue"
                >{{ dict.dictLabel }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-form-item label="专家审批结论" prop='fileInfo' v-if="type == 'conclusion'">
          <el-input
            v-model="ruleForm.fileInfo"
            placeholder="请选择文件"
          ></el-input>
          <el-upload
            ref="upload"
            class="upload-demo"
            :action="upload.uploadUrl"
            :on-progress="handleFileUploadFive"
            :data="uploadData"
            :on-success="handleFileFive"
            :headers="upload.headers"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :limit="1"
          >
            <div class="img-box">
              <img
                src="../../assets/images/icon_form_16_select_arrdown.png"
                alt=""
              />
            </div>
            <div class="el-upload__tip" style="color: red" slot="tip">
              提示：请上传文件格式 为 "doc","docx","xls","xlsx","ppt","jpg","png","pdf","zip","rar","7z"！
            </div>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getListingDetail,
  getTableDetail,
  getExpertId,
  getApprovalAdd,
  deleteFile,
  upLoadFile
} from "../../api/manage/annualPlan";
import { getToken } from "@/utils/auth";
// import EditDialog from './components/editDialog'
import CONST from '@/utils/constant'
export default {
  name: "annualProjectPlan",
  // components:{
  //   EditDialog
  // },
  data() {
    return {
      //规则
      rules: {
        approvalStatus: [
          { required: true, message: "请选择审核结果", trigger: "change" },
        ],
        // approvalOpinion: [
        //   { required: true, message: "请输入审核意见", trigger: "blur" },
        // ],
        fileInfo: [
          { required: true, message: "请选择文件", trigger: "change,blur" },
        ],
      },
      upload: {
        uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", //文件地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        fileName: "请选择文件",
      },
      upForm:{},
      //基本信息数据
      infoData: [
        { label: "年份", value: "year" },
        { label: "起始时间", value: "startTime" },
        { label: "截止时间", value: "endTime" },
        { label: "项目单位数量", value: "numberProjectUnits" },
        { label: "项目数量", value: "numberItems" },
        { label: "总投资估算(万元)", value: "totalInvestmentEstimation" },
        { label: "建设类项目", value: "constructionProjects" },
        { label: "购买服务类项目", value: "purchaseItems" },
        { label: "运维项目", value: "operationMaintenance" },
        { label: "其他分类", value: "other" },
      ],
      formData: {},
      // 查询参数
      queryForm: {
        pageSize: 10,
        pageNum: 1,
      },
      state: "", //项目状态
      total: 0,
      loading: false,
      tableData: [
        // {a:'12',b:"2",c:"3",d:"4",e:"5",f:"6",g:"7",h:"8",i:"9",j:"10"},
      ],
      proid: "",
      title: "年度项目审核", //弹窗标题
      type: "look",
      showDialog: false,
      queryFormRules: {},
      // 列表Tabs
      listType: "all",
      approveFlag: false,
      tableColumn: [
        { label: "项目名称", prop: "name" },
        { label: "项目单位", prop: "company" },
        { label: "项目类别", prop: "type" },
        { label: "投资估算(万元)", prop: "investmentEstimation" },
        { label: "提交时间", prop: "createTime" },
      ],
      ruleForm: {
        fileInfo:'',
        approvalStatus:'',
        approvalOpinion:'',
      },
      ifExtract: "0",
      fileType: [
        "doc",
        "docx",
        "xls",
        "xlsx",
        "ppt",
        "jpg",
        "png",
        "pdf",
        "zip", 
        "rar", 
        "7z"
      ],
      fileSize: 20,
      fileForm:{},//文件对象
      fileData:{},
      // 选择模板数据字典
      selectDemoList: [
        { dictValue: "建设理由不充分1", dictLabel: "建设理由不充分1" },
        { dictValue: "建设理由不充分2", dictLabel: "建设理由不充分2" },
        { dictValue: "建设理由不充分3", dictLabel: "建设理由不充分3" },
      ],
    };
  },
  created() {
    this.state = this.$route.query.type;
    // this.upForm.planId=this.$route.query.id
    this.getList();
    this.getTable();
    this.getDicts("expert_status").then((res) => {
      this.reviewType = res.data;
    });
  },
  computed:{
    uploadData(){
      return {
        planId:this.$route.query.id
      }
    }
  },
  methods: {
    //删除审核结论文件
    delFile(){
      deleteFile(this.fileForm.id).then(res =>{
        if(res.code==200){
          this.getList()
        }
      })
      // this.fileForm={}
    },
    //下载文件
    downLoadFile(){
      window.location.href=this.fileForm.fileUrl
    },
    handleExportFile() {
      window.location.href = `${CONST.TPL_EXPORTFILE}/yzq_manage_api/plan/export?planId=${this.$route.query.id}`;
    },
    handleClick(val, type) {
      if (type == "look") {
        this.$router.push({
          path: "/business_manage/manage/annualplan/projectPlanDetails",
          query: {
            infoId: val.annualId,
          },
        });
      } else if (type == "audit") {
        if(this.fileForm.fileName){
          this.type = "audit";
          this.showDialog = true;
          this.title = "年度项目审核";
          this.proid = val.proId;
        }else{
          this.$message.error('请先上传专家审核结论，再进行审核操作!')
        }
      }
    },
    //请求数据
    getList() {
      const planId = this.$route.query.id
      if(planId){
        getListingDetail(planId).then((res) => {
          this.ifExtract = res.ifExtract;
          if(res.expertFile!=null){
            this.fileForm=res.expertFile
          }else{
            this.fileForm={}
          }
          this.formData = res;
        });
      }
    },
    getTable() {
      let params = {
        pageSize: this.queryForm.pageSize,
        pageNum: this.queryForm.pageNum,
        planId: this.$route.query.id
      };
      getTableDetail(params).then((res) => {
        this.tableData = res.list;
        this.total = res.total;
      });
    },
    clickTo() {
      this.$router.push({
        path: "/business_manage/manage/projectPlan",
        query: {
          info:
            this.formData.year +
            "年度项目清单评审" +
            "." +
            this.formData.reviewType,
          planId: this.$route.query.id,
          enterType: 'annual'
        },
      });
    },
    uploadConclusion() {
      this.type = "conclusion";
      this.title = "上传专家审核结论";
      let flag=[]
      // this.tableData.forEach(item=>{
        //   console.log(item)
      // })
      this.showDialog = true;
      console.log('打啊',this.showDialog)
      // this.ruleForm.proID
    },
    changeShowDialog(data) {
      Object.assign(
        this.$refs.ruleFormRf.$data,
        this.$refs.ruleFormRf.$options.data()
      );
      if (data == "false") {
        this.showDialog = false;
        this.getTable();
      } else {
        this.showDialog = true;
      }
    },
    //关闭弹窗
    handleClose() {
      this.showDialog = false;
      this.fileData=''
      this.$refs["ruleFormRf"].resetFields();
    },
    //提交
    submitForm() {
      console.log(this.$refs)
      //  this.$refs['ruleFormRf'].validateField("fileName");
      this.$refs.ruleFormRf.validate((valid) => {
        if (valid) {
          if (this.type == "audit") {
            this.ruleForm.projectId = this.proid;
          }
          if (this.type == "conclusion") {
              let fileFormQuery={
                fileName:this.fileData.originalFilename,
                fileUrl:this.fileData.fileUrl,
                id:this.fileData.id
              }
            let id= this.$route.query.id
            upLoadFile(fileFormQuery,id).then(res=>{
              this.fileForm = fileFormQuery
              console.log(res)
              this.showDialog = false;
              this.ruleForm.fileInfo=''
              this.$refs["ruleFormRf"].resetFields();
              this.getList()
            }).catch( err =>{
              console.log(err)
            })
            // return false;
          }else{
            console.log(123)
            getApprovalAdd(this.ruleForm).then((res) => {
              this.showDialog = false;
              this.$refs["ruleFormRf"].resetFields();
              this.getTable();
              this.ruleForm={
                fileInfo:'',
                approvalStatus:'',
                approvalOpinion:'',
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 文件上传中处理
    handleFileUploadFive(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileFive(response, file, fileList) {
      console.log("文件上传成功", file);
      console.log(response,'上传返回')
      this.$refs.upload.clearFiles();
      this.$refs.ruleFormRf.clearValidate();
      // this.getList();
      if(response.code=='000_0000'){
        this.upload.fileName = file.name;
        this.ruleForm.fileInfo = file.name;
        this.fileData=response.data
      }else{
        if(response.code==500){
          this.$message.error(response.msg)
        }else{
          this.$message.error(response.message)
        }
      }
      this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
    },
    //文件上传前
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$message.error(
            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
          );
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    goToExpert() {
      getExpertId(this.$route.query.id).then((res) => {
        console.log(this.formData.expertStatus)
        if(this.formData.expertStatus==3||this.formData.expertStatus==4){
          this.$router.push(`/business_manage/manage/expertsdraw/detailsNoEvaluate?type=1&id=${res.reviewTaskId}&way=${this.formData.expertStatus}`)
        }else{
          this.$router.push(`/business_manage/manage/expertsdraw/details?type=1&id=${res.reviewTaskId}`)
        }
      })
    },
    // 选择模板内容
    handleCommand(command) {
      this.ruleForm.approvalOpinion = command;
    },
  },
};
</script>

<style lang="scss" scoped>
.annual-project-plan {
  width: 100%;
  padding: 16px;
  height: 100%;
  background: #f5f5f5;
  .container-box {
    // width: 1688px;
    background: #fff;
    padding: 24px;
    .main-title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      // padding:24px
    }
    .title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      .back-btn {
        margin-right: 56px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          margin-right: 7px;
        }
      }
    }
    .right-title {
      width: 1600px;
      height: 50px;
      line-height: 50px;
      display: flex;
      align-items: center;
      border: 1px solid #ebecef;
      border-right: 0;
      border-left: 0;
      margin: 24px 0 24px;
      img {
        margin-right: 6px;
      }
    }

    .tips1 {
      display: flex;
    }
    .table-header {
      display: inline-block;
      width: 267px;
      height: 48px;
      background: #fafafa;
      line-height: 48px;
      text-align: center;
      border: 1px solid #ebebeb;
      font-size: 14px;
    }
    .table-body {
      display: inline-block;
      width: 1333px;
      height: 48px;
      border: 1px solid #ebebeb;
      border-left: 0;
      text-indent: 24px;
      line-height: 48px;
      font-size: 14px;
    }
    .table-body1 {
      width: 267px;
    }
    .btn-box {
      display: flex;
      justify-content: space-between;
      div {
        .el-button {
          padding: 4px 16px;
          background: #3171ee;
          border-radius: 4px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #fff;
          display: flex;
          line-height: 24px;
          align-items: center;
          margin-right: 14px;
        }
        cursor: pointer;
      }
      .upload-btn,
      .export-btn {
        .el-button {
          background: #ffffff;
          border: 1px solid #3171ee;
          border-radius: 4px;
          color: #3171ee;
          margin-right: 0;
        }
      }
      .is-disabled {
        background: #ccc !important;
        color: #fff !important;
        border: none !important;
      }
      .file_box{
        padding:7px 9px;
        display: flex;
        align-items: center;
        .file_name{
          display: inline-block;
          font-family: 'PingFang SC';
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 24px;
          color: #3171EE;
          margin:0 7px;
        }
      }
    }
  }
  .tab-box {
    display: flex;
    flex-wrap: wrap;
  }
  .table-box {
    margin: 25px 0;
    // width:1600px;
    .state-span {
      display: flex;
      align-items: center;
      .out-line {
        display: inline-block;
        width: 16px;
        height: 16px;
        // opacity: 0.1;
        background: rgba(49, 113, 238, 0.1);
        border-radius: 16px;
        margin-right: 10px;
        span {
          margin: 4px;
          width: 7px;
          height: 7px;
          background: #3171ee;
          border-radius: 16px;
          display: inline-block;
        }
      }
      .out-line1 {
        background: rgba(223, 32, 66, 0.1);
        span {
          background: #df2042;
        }
      }
      .out-line2 {
        background: rgba(51, 168, 61, 0.1);
        span {
          background: #33a83d;
        }
      }
    }
  }
  .bottom-btn {
    display: flex;
    div {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: LEFT;
      color: #999999;
      line-height: 32px;
    }
    .start-btn,
    .reset-btn {
      cursor: pointer;
      width: 88px;
      height: 32px;
      line-height: 32px;
      background: #3171ee;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
    }
    .reset-btn {
      background: #ffffff;
      border: 1px solid #3171ee;
      border-radius: 4px;
      color: #3171ee;
      margin: 0 14px;
    }
  }
}
.number-box {
  display: flex;
  width: 218px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}
.el-pagination {
  text-align: center;
  margin-top: 40px;
}
.img-box {
  position: absolute;
  right: -1px;
  top: 0;
  width: 40px;
  height: 40px;
  background: #0d72ff;
  border-radius: 0px 4px 4px 0px;
  img {
    width: 16px;
    height: 16px;
    margin: 12px;
  }
}
.upload-demo{
  position: relative;
  .img-box{
    position: absolute;
    top:-40px;
  }
  .el-upload__tip{
    position: absolute;
    top:0px;
  }
}
.dialog-box {
  // 下载模板样式修改
  .select-template {
    .el-dropdown-link {
      color: #3171ee;
    }
    .icon-arrow-down {
      margin-left: 10px;
      color: #3171ee;
    }
    // width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: LEFT;
    color: #3171ee;
    margin-left: 30%;
    margin-bottom: 20px;
    cursor: pointer;
    img {
      margin-left: 10px;
    }
  }
}
</style>
<style lang='scss'>
.annual-project-plan .dialog-box .el-form-item .el-textarea__inner{
  width: 100%;
}
.annual-form-box{
  .descriptions-item-label-annual{
    width: 266px !important;
    text-align: center !important;;
  }
  .item-label-one{
    width: 267px !important;
  }
  .descriptions-item-content {
    text-align: left !important;
    // text-align: center !important;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
      position: relative;
      top: 4px;
    }
  }
  .cancel-border-top {
    border-top: 0 !important;
  }
  .cancel-border-bottom {
    border-bottom: 0 !important;
  }
  .descriptions-item-height {
    height: 108px;
  }
}
</style>
